<template>
	<view class="content">
		<view class="select">
			<view class="selectlist" v-for="(item,index) in selectlist" @click="select(item.id)">
				<view class="select1" :style="{background:a==item.id?'#FFFFFF':'',color:a==item.id?'#2C7CF6':''}">
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>


		<view class="record" v-for="(item,index) in recordlist">
			<view class="record_tit">
				<text>{{item.title}}校园套餐</text>
			</view>

			<view class="record_list" v-for="itemin in item.packagelist">
				<view class="record_list_top" @click="todetails()">
					<text>{{item.title}}期</text>
				</view>
				<view class="record_list1">
					<view class="record_list2">
						<text>全部库存：{{itemin.qb}}套</text>
					</view>
					<view class="record_list2">
						<text>支付未领取：{{itemin.wlq}}套</text>
					</view>
					<view class="record_list2">
						<text>已领取：{{itemin.ylq}}套</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				a: 0,
				selectlist: [{
						id: 0,
						title: '校园套餐'
					},
					{
						id: 1,
						title: '特色课程包'
					}
				],
				recordlist: [{
						id: 0,
						title: 'A',
						packagelist: [{
								id: 0,
								qb: '200',
								wlq: '200',
								ylq: '200'
							},
							{
								id: 1,
								qb: '200',
								wlq: '200',
								ylq: '200'
							}
						]
					},
					{
						id: 0,
						title: 'b',
						packagelist: [{
								id: 0,
								qb: '200',
								wlq: '200',
								ylq: '200'
							},
							{
								id: 1,
								qb: '200',
								wlq: '200',
								ylq: '200'
							}
						]
					}
				]
			}
		},
		methods: {
			todetails() {
				uni.navigateTo({
					url: '/pages/school/myschool/package_buyrecord'
				})
			},
			select(id) {
				this.a = id
			}
		}
	}
</script>

<style>
	.content {
		width: 750rpx;
		height: 1840rpx;
		background: #FAFAFA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.select {
		width: 690rpx;
		height: 96rpx;
		background: #F3F3F3;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		margin: 40rpx auto 0;
	}

	.select1 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #666666;
		width: 328rpx;
		height: 80rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.selectlist {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.record {
		width: 690rpx;
		height: 616rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 32rpx auto 32rpx;
	}

	.record_tit {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		margin-left: 32rpx;
		padding-top: 36rpx;
	}

	.record_list {
		width: 626rpx;
		height: 220rpx;
		background: #F0F3FF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin: 24rpx auto 32rpx;
	}

	.record_list_top {

		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		padding-top: 24rpx;
		margin-left: 40rpx;
	}

	.record_list1 {
		display: flex;
		flex-wrap: wrap;
	}

	.record_list2 {
		width: 248rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		margin: 12rpx 20rpx 12rpx 34rpx;
	}
</style>